<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/${initParam.rootPath}/script/jquery.js"></script>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("div")
	$("#jsonBtn").on("click", function(){
		/*
		/jQuery_class_stu/jQueryServlet 요청
		cmd - getMemberByIdJSON, id - 임력된 값
		요청방식 - POST
		응답데이터 타입 - JSON
		*/
		$.ajax({
			"url" : "/${initParam.context_root}/member/searchMemberById.do",
			"type" : "POST",
			//"data" : "cmd=getMemberByIdJSON&id="+$("#id").val(),
			"data" : {id : $("#id").val()},
			"dataType" : "JSON",
			"error" : errorMethod,
			"success" : function(json){//$.ajax에서 dataType을 JSON으로 주면 서버에서 넘어
				//alert(json.member.id+"-"+json.member.name);
			 	//alert(json.jd+"-"+json.name);
				//$("#layer").html(json.member.id+" - "+json.member.name); 
			 	alert(json.jd+"-"+json.name);
				$("#layer").html(json.id+" - "+json.name+" - 가입일 : "+json.joinDate); 
				//$("#layer").html(json.id+" - "+json.name);
			},
			"beforeSend" : checkId,
		});
	});
});
function checkId(){
	//if($("#id").val().length==0)
	if(!$("#id").val().trim()){ //trim()은 공백이 잘라내주는 함수
		alert("조회할 ID를 넣으세요");
		$("#id").val("").focus();
		return false; //false를 return 하면 서버로 요청이 안된다.
		
	}
};
/*
 ajax() 의 error 프라퍼티에 틍록할 함수.
 매개변수 (모두생략 가능)
 1. XMLHttpRequest 객체
 2. 응답 코드 메세지(success, error)
 3. 에러 메세지
 */
function errorMethod(){
	alert("요청시 오류 발생");
};
</script>
     
</head>
<body>    
 <!--  $("#id").val("aaa"aa) $("#id").text("aaa<br>") $("#id").html("aaa<br>") -->
<form>
	ID : <input type="text" name="id" id="id">
	<input type="button" value="ID로 조회" id="jsonBtn">
</form>
<div id="layer"></div>
</body>
</html>











